{% schema %}
{
  "name": "Contact & Community",
  "max_blocks": 2,
  "settings": [],
  "blocks": [
    {
      "type": "info_block",
      "name": "Info Block",
      "settings": [
        {
          "type": "image_picker",
          "id": "icon",
          "label": "Icon"
        },
        {
          "type": "text",
          "id": "heading",
          "label": "Heading",
          "default": "Contact Us"
        },
        {
          "type": "text",
          "id": "description",
          "label": "Description",
          "default": "Still need assistance?"
        },
        {
          "type": "text",
          "id": "link_text",
          "label": "Link Text",
          "default": "We're here to help"
        },
        {
          "type": "url",
          "id": "link_url",
          "label": "Link URL"
        }
      ]
    }
  ],
  "presets": [
    {
      "name": "Contact & Community",
      "blocks": [
        {
          "type": "info_block"
        },
        {
          "type": "info_block"
        }
      ]
    }
  ]
}
{% endschema %}

<div class="contact-community-section" style="display: flex; gap: 20px; flex-wrap: wrap; background: #fafafa; padding: 30px;">
  {% for block in section.blocks %}
    <div class="info-box" style="flex: 1 1 300px; background: white; border-radius: 8px; padding: 20px; display: flex; align-items: center; gap: 15px; box-shadow: 0 2px 6px rgba(0,0,0,0.05);">
      {% if block.settings.icon %}
        <div style="min-width: 48px; min-height: 48px; display: flex; align-items: center; justify-content: center;">
          <img src="{{ block.settings.icon | img_url: '60x' }}" alt="icon" style="width: 48px; height: 48px; object-fit: contain;">
        </div>
      {% endif %}
      <div style="flex: 1;">
        <h3 style="margin: 0 0 5px; font-weight: 600;">{{ block.settings.heading }}</h3>
        <p style="margin: 0; font-size: 14px;">
          {{ block.settings.description }}
          {% if block.settings.link_url and block.settings.link_text %}
            <a href="{{ block.settings.link_url }}" style="text-decoration: underline; font-weight: 500; margin-left: 5px;">{{ block.settings.link_text }}</a>
          {% endif %}
        </p>
      </div>
    </div>
  {% endfor %}
</div>

